<template>
    <div class="userList-nav">
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
        <div class="table-nav">
            <add-classify :getList="getList"></add-classify>
            <!-- cascader没有回显的时候设置key值 -->
            <vxe-table border max-height='550px' ref="xTree" :data="tableData" :row-config="{ keyField: 'id' }"
                :tree-config="{ transform: true, rowField: 'cat_id', parentField: 'cat_pid' }">
                <!-- <vxe-column type="seq" width="60" tree-node></vxe-column> -->
                <vxe-column field="cat_name" title="分类名称" width="400" tree-node></vxe-column>
                <vxe-column field="cat_deleted" title="是否有效"></vxe-column>
                <vxe-column field="cat_level" title="排序">
                    <template #default="scope">
                        <div>
                            <el-tag v-if="scope.row.cat_level == 0"> 一级 </el-tag>
                            <el-tag v-if="scope.row.cat_level == 1" type="success"> 二级 </el-tag>
                            <el-tag v-if="scope.row.cat_level == 2" type="warning"> 三级 </el-tag>
                        </div>
                    </template>
                </vxe-column>
                <vxe-column title="操作">
                    <template #default="scope">
                        <div>
                            <el-button type="primary" icon="Edit" @click="setClass(scope)">
                                编辑
                            </el-button>
                            <el-button type="danger" icon="Delete" @click="deleteAttr(scope)">
                                删除
                            </el-button>
                        </div>
                    </template>
                </vxe-column>
            </vxe-table>
            <el-pagination v-model:currentPage="pagenum" v-model:page-size="pagesize" :page-sizes="[1, 5, 10, 50]"
                :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
                @size-change="changePage" @current-change="changePage" />
        </div>
        <el-dialog v-model="showSetClassify" title="修改分类" width="40%">
            <el-form :model="form" label-width="80px" status-icon :rules="rules" ref="ruleFormRef">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="form.cat_name" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="onsubmit(ruleFormRef)">
                        提交
                    </el-button>
                    <el-button @click="closeDialog(ruleFormRef)">取消</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
      
<script setup>
import { reactive, ref } from "vue";
import { getCategories, deleteClassify, setClassify } from "@/api/goods";
import { ElMessage, ElMessageBox } from "element-plus";
import AddClassify from '@/components/commdity/AddClassify.vue'
let tableData = reactive([]);
let pagenum = ref(1);
let pagesize = ref(5);
let showSetClassify = ref(false);
let form = reactive({})
let ruleFormRef = ref(null);
let total = ref(0);
let xTree = ref(null)
let classifyId;
let rules = {
    cat_name: [
        { required: true, message: "分类名称不能为空", trigger: "blur" },
    ],
};
//获取列表
const getList = async () => {
    tableData.splice(0);
    let res = await getCategories({ pagenum: pagenum.value, pagesize: pagesize.value, });
    getTable(res.data.result);
    total.value = res.data.total;
    xTree.value.loadData(tableData);
};
getList();
const getTable = (data) => {
    for (let i = 0; i < data.length; i++) {

        if (data[i].children && data[i].children.length != 0) {
            getTable(data[i].children);

        }
        data[i].children = [];
        tableData.push(data[i])
    }
}
const changePage = () => {
    getList();
};
const setClass = (scope) => {
    form.cat_name = scope.row.cat_name;
    showSetClassify.value = true;
    classifyId = scope.row.cat_id;
}
const closeDialog = (ruleFormRef = null) => {
    if (ruleFormRef != null) ruleFormRef.resetFields();
    showSetClassify.value = false;
};
const onsubmit = (ruleFormRef) => {
    ruleFormRef.validate(async (isValid) => {
        if (isValid) {
            let res = await setClassify(classifyId, form);
            ElMessageBox.alert(res.meta.msg, "", {
                // if you want to disable its autofocus
                // autofocus: false,
                confirmButtonText: "确认",
                callback: () => {
                    let ls = res.meta.status >= 200 && res.meta.status < 300;
                    ElMessage({
                        type: ls ? "success" : "error",
                        message: ls ? "更新成功" : "更新失败",
                    });
                },
            });
            closeDialog(ruleFormRef);
            getList();
        }
        // ruleFormRef.resetFields();
    });
};
const deleteAttr = async (scope1) => {
    ElMessageBox.confirm(
        `确定要删除分类(${scope1.row.cat_name})吗？`,
        "Warning",
        {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
        }
    )
        .then(async () => {
            let res = await deleteClassify(scope1.row.cat_id);
            let ls = Boolean(res.meta.status >= 200 && res.meta.status < 300);
            ElMessage({
                type: ls ? "success" : "error",
                message: ls ? "删除成功" : res.meta.msg,
            });
            getList();
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "取消删除",
            });
        });
}
</script>
      
<style lang="scss" scoped>
.userList-nav {
    position: relative;
    width: 100%;
    // height: 100%;
    overflow: auto;

    .table-nav {
        position: absolute;
        width: 100%;
        // max-height: 100%;
        padding: 20px;
        box-sizing: border-box;
        margin-top: 10px;
        background-color: white;
        overflow: hidden;

        .vxe-table {
            margin: 20px 0;

        }

        .pagination-nav {}
    }
}
</style>